<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="./js/zyz.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <main class="c900">
        <div class="flex detail">
            <img class="half" :src="task.image" alt="">
            <div class="half">
                <h1 style="margin-top: 0px">{{task.name}}</h1>
                <div class="grid2">
                    <span>时间: </span><span>{{task.begin}} ~ {{task.end}}</span>
                    <span>地点: </span><span>{{task.addr}}</span>
                    <span>人数: </span><span>{{task.joins == null ? 0 : task.joins.length}}/ {{task.nums}} 人</span>
                    <span>发起人: </span><span>{{task.user == null ? "???" : task.user.name}}</span>
                    <span>状态: </span><span>{{task.state}}</span>
                    <div style="grid-column: 2; text-align: end;padding-right: 20px">
                        <button style="padding: 5px 20px">点赞</button>
                        <button style="padding: 5px 20px">关注</button>
                        <button style="padding: 5px 20px" @click="join()">参与</button>
                        <button style="padding: 5px 20px">退出</button>
                    </div>
                </div>
            </div>
        </div>
        <h3 class="flex" style="background-color: #0e90d2; padding: 10px; color: #fff">活动内容<button style="padding: 3px 10px">我要捐款</button></h3>
        <p>
            {{task.tdesc}}
        </p>
        <h3 class="flex" style="background-color: #0e90d2; padding: 10px; color: #fff;margin-bottom: 0px">
            活动风采
            <el-upload><button style="padding: 3px 10px">上传照片</button></el-upload>
        </h3>
        <div style="display: flex;flex-direction: column">
            <div class="fc">
                <img src="https://img2.baidu.com/it/u=2515531278,208758837&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=314">
                <img src="https://img1.baidu.com/it/u=3828116130,2185793573&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" class="head">
            </div>
            <div class="fc">
                <img src="https://img1.baidu.com/it/u=158259047,691066169&fm=253&fmt=auto&app=138&f=PNG?w=760&h=500">
                <img src="https://img0.baidu.com/it/u=3428082845,2029925136&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" class="head">
            </div>
            <div class="fc">
                <img src="https://img2.baidu.com/it/u=129697069,3288798703&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667">
                <img src="https://img1.baidu.com/it/u=2307902938,771588540&fm=253&fmt=auto&app=120&f=JPEG?w=507&h=500" class="head">
            </div>
        </div>
        <h3 class="flex" style="background-color: #0e90d2; padding: 10px; color: #fff">报名志愿者<button style="padding: 3px 10px">我要报名</button></h3>
        <img v-for="item in task.joins" :src="item.head" class="head">
        <h3 style="background-color: #0e90d2; padding: 10px; color: #fff">评论</h3>
        <div class="flex msg">
            <img src="https://loremflickr.com/60/60?4" class="head">
            <div>
                <time>2024-01-01 15:30:23</time>
                <div>太好了!</div>
            </div>
        </div>
        <div class="flex msg">
            <img src="https://loremflickr.com/60/60?5" class="head">
            <div>
                <time>2024-01-01 15:30:23</time>
                <div>感觉很好!</div>
            </div>
        </div>
        <div class="flex msg">
            <img src="https://loremflickr.com/60/60?6" class="head">
            <div>
                <time>2024-01-01 15:30:23</time>
                <div>人人为我,我为人人!</div>
            </div>
        </div>
        <div class="flex msg">
            <img src="https://loremflickr.com/60/60?7" class="head">
            <div>
                <textarea style="flex-grow: 1; padding: 5px" placeholder="我来说几句..."></textarea>
                <button>发表</button>
            </div>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            id:0,
            task:{},
        },
        created() {
            this.id = location.search.replace("?","");
            this.getTask();
        },
        methods : {
            getTask(){
                axios.get(
                    "findTask",
                    {
                        params:{
                            id:this.id,
                        }
                    }
                ).then(resp=>{
                    this.task = resp.data;
                    this.task.begin = this.dateFormat(this.task.begin);
                    this.task.end = this.dateFormat(this.task.end);
                });
            },
            join(){
                let p = new URLSearchParams();
                p.append("tid",this.id);
                axios.post(
                    "join",
                    p
                ).then(resp=>{
                    if(resp.data.code == 0){
                        console.log(resp.data.msg);
                        this.$alert(resp.data.msg);
                    }else if(resp.data.code == 1){
                        console.log(resp.data.msg);
                        this.$message(resp.data.msg);
                    }else if(resp.data.code == -1){
                        console.log(resp.data.msg);
                        this.$alert(resp.data.msg);
                    }else if(resp.data.code == -2){
                        console.log(resp.data.msg);
                        this.$alert(resp.data.msg);
                    }
                });
            },
            dateFormat(date){
                formatDate = date.date.year+"-"+date.date.month+"-"+date.date.day+" "+date.time.hour+":"+date.time.minute+":"+date.time.second;
                return formatDate;
            }
        }
    })
</script>



<style>
    .fc{
        display: flex;
        position: relative;
    }
    .fc>.head{
        position: absolute;
        right: 10px;
        top: 10px;
        box-shadow: 0px 0px 10px 0px blue;
    }
    *{
        color:#222
    }
    .c900>.detail{
        align-items: stretch;
    }
    .c900>div>.half{
        width: 47%;
    }
    .c900 .head{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 5px;
        transition: all 0.5s;
    }
    .head:hover{
        transform: scale(1.5);
        cursor: pointer;
    }

    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
        background-image: url("https://img.tukuppt.com/bg_grid/01/21/87/KNwCBCOQTJ.jpg%21/fh/350");
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    #app>header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 9999;
        height: 60px;
    }
    #app>header h1{
        margin: 10px;
    }
    #app>header span>a{
        margin-left: 20px;
        color: #fff;
    }
    #app>main{
        background-color: #eee8;
        min-height: calc(100% - 100px);
        padding: 20px;
    }

    .msg{
        margin-block: 10px;
        justify-content: left;
        align-items: stretch;
    }
    .msg>div{
        margin-left: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .msg>div>time{
        color: #777;
        font-size: 0.7em;
    }
    .msg>div>div{
        padding: 5px 0px;
        flex-grow: 1;
        color: #333;
        font-size: 0.8em;
    }
    .msg>div>button{
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
</style>
</body>
</html>